<template>
	<view class="">
		<view class="batch-num" :class="isShow ? 'on' : ''">
			<view class="batch-body">
				<view class="share-main-btn">
					<view class="share-box-title">分享到</view>
					<view class="flex-sb-cent">
						<view class="item-btn" v-if="shareBtn">
							<u-button type="primary" size="small" open-type="share">
								<view class="item-btn-img">
									<image
										src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/wxhy.png"
										mode=""></image>
								</view>
								<view class="title">微信好友</view>
							</u-button>
						</view>
						<view class="item-btn" v-if="copyUrl">
							<u-button type="primary" size="small" @click="copyShareUrl">
								<view class="item-btn-img">
									<image
										src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_copy.png"
										mode=""></image>
								</view>
								<view class="title">复制链接</view>
							</u-button>
						</view>
						<!-- 					<view class="item-btn">
							<u-button type="primary" size="small" @click="onShare">
								<view class="item-btn-img">
									<image
										src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/pyq.png"
										mode=""></image>
								</view>
								<view class="title">朋友圈</view>
							</u-button>
						</view> -->
					<!-- 	<view class="item-btn" @click="onCopy" v-if="copyBtn">
							<view class="item-btn-img">
								<image
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/link.png"
									mode=""></image>
							</view>
							<text>复制链接</text>
						</view> -->
					</view>
				</view>
				<view class="cancle-btn" @click="onCancel">
					<u-button type="primary" text="取消"></u-button>
				</view>
			</view>
		</view>
		<view class="mask" v-show="isShow" @click="onCancel"></view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/common/config'
	import { mapGetters } from 'vuex'
	import getAppLink from '@/mixins/getAppLink.js'
	
	export default {
		name: "share",
		options: {
			styleIsolation: 'shared'
		},
		mixins: [getAppLink],
		props: {
			isOpen: {
				default: false,
				type: Boolean
			},
			orderNo: {
				default: '',
				type: String
			},
			shareId: {
				default: '',
				type: String
			},
			url: {
				default: '',
				type: String
			},
			shareBtn:{
				default: true,
				type: Boolean
			},
			copyUrl:{
				default: true,
				type: Boolean
			},
			copyBtn:{
				default: true,
				type: Boolean
			},
			jfcode:{
				default: '',
				type: String
			}
		},
		data() {
			return {
				isShow: false,
				config: {
					"appId": "wxc3e4d1682da3053c",
					"url": "www.baidu.com",
					"name": "分享核销码",
					"logo": "",
					"describe": "这是一个分享核销码的测试",
					config: {},
					"user": {
						"name": "",
						"avatar": ""
					}
				}
			}
		},
		watch: {
			isOpen(newv, oldV) {
				this.isShow = newv
				wx.hideShareMenu()
				console.log(newv)
			}
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
		},
		methods: {
			async copyShareUrl(){
				let params = {
					path: '/components/goodsDetail',
					query: `jfcode=${this.jfcode}&userId=${this.getUserInfo.id}`, // 短链的入参
				}
				const url = await this.getShareLink(params)
				console.log('返回的url：', url);
				if(url && url.length){
					uni.setClipboardData({
						data: url, // 复制的内容 
						success: res => {
							uni.showToast({
								title: '复制成功',
								duration: 1000
							})
						}
					});
				}else {
					uni.showToast({
						title: '复制失败',
						icon: 'none',
					})
				}
			},
			onShare(scene) {},
			//复制
			onCopy(data) {
				let url = ''
				if (this.url) {
					url = this.url
				}
	
				if (this.orderNo) {	
					let str = 'https://oms.atlastire.cn/#/shareWriteOffCode'
					if (baseUrl.indexOf("-uat") != -1) {
						str = 'http://oms-uat.atlastire.cn/#/shareWriteOffCode'
					} else if (baseUrl.indexOf("-sit") != -1) {
						str = "http://oms-sit.ehzcloud.com/#/shareWriteOffCode"
					}
					url = str + '?orderNo=' + this.orderNo + '&env=' + baseUrl
				}
				if (this.shareId) {
					let str = 'https://oms.atlastire.cn/#/h5Register'
					if (baseUrl.indexOf("-uat") != -1) {
						str = 'http://oms-uat.atlastire.cn/#/h5Register'
					} else if (baseUrl.indexOf("-sit") != -1) {
						str = "http://oms-sit.ehzcloud.com/#/h5Register"
					}
                    url = str + '?shareId='+this.shareId
				}

				uni.setClipboardData({
					data: url, // 复制的内容 
					success: function() {
						console.log('success');
						uni.showToast({
							title: '复制成功',
							duration: 1000
						})
					}
				});
			},
			onCancel() {
				this.isShow = false
				this.$emit('cancel');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.batch-num {
		width: 100%;
		// height: 624rpx;
		// background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1000;
		transform: translate3d(0, 100%, 0);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		overflow: hidden;



		&.on {
			transform: translate3d(0, 0, 0);
		}

		.batch-body {
			padding: 20rpx;
			background: #fff;
		}

		.item-btn {
			width: 50%;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 26rpx;
			text-align: center;
			position: relative;

			/deep/.u-button {
				background-color: transparent;
				border: none;
				display: flex;
				color: #000;
				height: auto;
				flex-wrap: wrap;

				.title {
					width: 100%;
				}
			}

			.item-btn-img {
				width: 72rpx;
				height: 72rpx;
				margin: 0 auto;
				margin-bottom: 12rpx;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;

				image,
				img {
					width: 72rpx;
					height: 72rpx;
					pointer-events: none;
					-webkit-touch-callout: none;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
				}
			}
		}

		.share-main-btn {
			width: calc(100% - 96rpx);
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 12rpx;
			padding: 28rpx 48rpx;
			margin-top: 20rpx;

			.share-box-title {
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 32rpx;
				padding-bottom: 30rpx;
			}

			.flex-sb-cent {
				display: flex;
				justify-content:center;
			}
		}

		.cancle-btn {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2E73FF;
		}
	}

	// 分享
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0.7;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999 !important;
	}
</style>
